<template>
    <view class="home-page" :style="'height:100vh'">
        <!-- 患者列表 -->
        <PatientList v-if="curTabItem == 'patient'" class="patient-list" :showQuitBtn="showQuitBtn"></PatientList>
        <!-- 核对 -->
        <CheckList v-if="curTabItem == 'check'" class="patient-list" :showQuitBtn="showQuitBtn"></CheckList>
        <!-- 配药 -->
        <DrugList v-if="curTabItem == 'drug'" class="patient-list" :showQuitBtn="showQuitBtn"></DrugList>
        <!-- 执行 -->
        <ExecuteList v-if="curTabItem == 'execute'" class="patient-list" :showQuitBtn="showQuitBtn"></ExecuteList>
        <!-- 皮试执行 -->
        <SkinList v-if="curTabItem == 'skin'" class="patient-list" :showQuitBtn="showQuitBtn" @handleNotify="handleNotify" @setSkinTestInterval="setSkinTestInterval"></SkinList>
        <!-- 检验执行 -->
        <InspectList v-if="curTabItem == 'inspect'" class="patient-list" :showQuitBtn="showQuitBtn"></InspectList>
        <!-- 交叉配血 -->
        <MatchList v-if="curTabItem == 'match'" class="patient-list" :showQuitBtn="showQuitBtn"></MatchList>
        <!-- 血袋签收 -->
        <SignBlood v-if="curTabItem == 'signBlood'" class="patient-list" :showQuitBtn="showQuitBtn"></SignBlood>
        <!-- 取血 -->
        <CollectionList v-if="curTabItem == 'collection'" class="patient-list" :showQuitBtn="showQuitBtn"></CollectionList>
        <!-- 输血 -->
        <TransfusionList v-if="curTabItem == 'transfusion'" class="patient-list" :showQuitBtn="showQuitBtn"></TransfusionList>
        <!-- 血袋上交 -->
        <HandinList v-if="curTabItem == 'handin'" class="patient-list" :showQuitBtn="showQuitBtn"></HandinList>
        <!-- 体征录入 -->
        <SignList v-if="curTabItem == 'sign'" class="patient-list" :showQuitBtn="showQuitBtn"></SignList>
        <!-- 病房巡视 -->
        <TourList v-if="curTabItem == 'tour'" class="patient-list" :showQuitBtn="showQuitBtn"></TourList>
        <!-- 仪器设备 -->
        <EquipmentList v-if="curTabItem == 'equipment'" class="patient-list" :showQuitBtn="showQuitBtn"></EquipmentList>
        
        <view class="bottom-area">
            <u-line></u-line>
            <scroll-view class="scroll-view" :scroll-y="false" :scroll-x="true">
                <view class="tab-view" v-for="(item, index) in tabItems" :key="index" @click="tabClick(item)">
                    <view class="tab-item" v-if="item.show">
                        <u--image width="25" height="25"
                                  :src="isTabSelect(item)?item.activeIcon:item.inActiveIcon"></u--image>
                        <view :class="{'tab-title':true,'tab-title-active':isTabSelect(item),'tab-title-inactive':!isTabSelect(item)}">
                            {{item.title}}
                        </view>
                    </view>
                </view>
            </scroll-view>
        </view>

        <!-- 皮试患者提示框 -->
		<view >
			<u-modal :show="skinCompleteTipsShow" :title="skinCompleteTipsTitle" 
				@confirm="confirmSkinTestTips()">
				<view>
					<view v-for="(item,index) in skinCompleteTipsContent" :key="index">
						<view style="font-size:30rpx;">【病人：{{item.brxm}}】【{{item.naSrvMed}}】皮试已完成！</view>
					</view>
				</view>
			</u-modal>
		</view>
    </view>
</template>

<script>
    import { mapState } from "vuex"
    import MethodChannel from '@/api/MethodChannel.js';//广播工具

    import PatientList from "../patient/patientList";
    import CheckList from "../check/checkList";
    import DrugList from "../drug/drugList";
    import ExecuteList from "../execute/executeList";
    import SkinList from "../skin/skinList";
    import InspectList from "../inspect/inspectList";
    import MatchList from "../match/matchList";
    import SignBlood from '../signBlood/signBloodList'
    import CollectionList from '../collection/collectionList'
    import TransfusionList from '../transfusion/transfusionList'
    import HandinList from '../handin/handinList'
    import SignList from '../sign/signList'
    import TourList from '../tour/tourList'
    import EquipmentList from '../equipment/equipmentList'
    

    export default {
        components: {
            PatientList,//患者列表
            CheckList,//核对列表
            DrugList,//配药
            ExecuteList,//执行
            SkinList,//皮试执行
            InspectList,//检验执行
            MatchList,//交叉配血
            SignBlood,//血袋签收
            CollectionList,//取血
            TransfusionList,//输血
            HandinList,//血袋上交
            SignList,//体征录入
            TourList,//病房巡视
            EquipmentList,//仪器设备
        },
        data() {
            return {
                curTabItem: "patient",
                tabItems: [
                    {
                        tagFlag: "patient",
                        title: "患者",
                        activeIcon: "/static/home/patient.svg",
                        inActiveIcon: "/static/home/patient_u.svg",
                        index:'1',
                        show:false,//是否展示
                    },
                    {
                        tagFlag: "check",
                        title: "核对",
                        activeIcon: "/static/home/check.svg",
                        inActiveIcon: "/static/home/check_u.svg",
                        index:'2',
                        show:false,//是否展示
                    },
                    {
                        tagFlag: "drug",
                        title: "配药",
                        activeIcon: "/static/home/drug.svg",
                        inActiveIcon: "/static/home/drug_u.svg",
                        index:'3',
                        show:false,//是否展示
                    },
                    {
                        tagFlag: "execute",
                        title: "执行",
                        activeIcon: "/static/home/execute.svg",
                        inActiveIcon: "/static/home/execute_u.svg",
                        index:'4',
                        show:false,//是否展示
                    },
                    {
                        tagFlag: "skin",
                        title: "皮试执行",
                        activeIcon: "/static/home/skin.svg",
                        inActiveIcon: "/static/home/skin_u.svg",
                        index:'5',
                        show:false,//是否展示
                    },
                    {
                        tagFlag: "inspect",
                        title: "检验执行",
                        activeIcon: "/static/home/inspect.svg",
                        inActiveIcon: "/static/home/inspect_u.svg",
                        index:'6',
                        show:false,//是否展示
                    },
                    {
                        tagFlag: "match",
                        title: "交叉配血",
                        activeIcon: "/static/home/match.svg",
                        inActiveIcon: "/static/home/match_u.svg",
                        index:'7',
                        show:false,//是否展示
                    },
                    {
                        tagFlag: "signBlood",
                        title: "血袋签收",
                        activeIcon: "/static/home/collection.svg",
                        inActiveIcon: "/static/home/collection_u.svg",
                        index:'8',
                        show:false,//是否展示
                    },
                    {
                        tagFlag: "collection",
                        title: "取血",
                        activeIcon: "/static/home/collection.svg",
                        inActiveIcon: "/static/home/collection_u.svg",
                        index:'9',
                        show:false,//是否展示
                    },
                    {
                        tagFlag: "transfusion",
                        title: "输血",
                        activeIcon: "/static/home/transfusion.svg",
                        inActiveIcon: "/static/home/transfusion_u.svg",
                        index:'10',
                        show:false,//是否展示
                    },
                    {
                        tagFlag: "handin",
                        title: "血袋上交",
                        activeIcon: "/static/home/handin.svg",
                        inActiveIcon: "/static/home/handin_u.svg",
                        index:'11',
                        show:false,//是否展示
                    },
                    {
                        tagFlag: "sign",
                        title: "体征录入",
                        activeIcon: "/static/home/sign.svg",
                        inActiveIcon: "/static/home/sign_u.svg",
                        index:'12',
                        show:false,//是否展示
                    },
                    {
                        tagFlag: "equipment",
                        title: "仪器设备",
                        activeIcon: "/static/home/equipment.svg",
                        inActiveIcon: "/static/home/equipment_u.svg",
                        index:'13',
                        show:false,//是否展示
                    },
                    // {
                    //     tagFlag: "tour",
                    //     title: "病房巡视",
                    //     activeIcon: "/static/home/tour.svg",
                    //     inActiveIcon: "/static/home/tour_u.svg",
                    //     index:'12',
                    //     show:false,//是否展示
                    // },
                ],
                showQuitBtn:true,//是否展示 “退出” 按钮

                skinTestInterval:null,//皮试轮询
                skinCompleteTipsShow:false,
                skinCompleteTipsTitle:'提醒',
                skinCompleteTipsContent:[],//已完成皮试的病人
            }
        },
        async onLoad(){
            //http://localhost:8086/#/pages/main/home?outside=true&tabList=1,2,3,4,5&yhdm=mzys04&pwd=noPwd&jgid=6045d1b8d0081238ab92050a
            let routerQuery = this.$route.query;
            console.log('路由参数：',routerQuery);
            if(routerQuery.outside == 'true'){ //外部访问
                let {yhdm,pwd,jgid} = routerQuery;
                let params={
                    yhdm:yhdm,
                    pwd:pwd,
                    jgid:jgid,
                }
                let result = await this.$commonAjaxGet("mobile/user/login", params);
                if (result.res.ReType == 0) {
                    uni.setStorageSync('loginInfo', result.res?.Data?.LonginUser);//localStorage
                    this.$store.commit("setLoginUser", result.res?.Data?.LonginUser);
                    this.$store.commit("setArea", result.res?.Data?.Areas);
                }else {
                    uni.removeStorageSync('loginInfo');
                }

                //控制tab显示
                let tabList = routerQuery.tabList.split(',');
                this.tabItems.forEach(el=>{
                    if(tabList.find(tab=>tab == el.index) != null){
                        el.show = true;
                    }else{
                        el.show = false;
                    }
                })
                //定位到第一个需要显示的tab
                this.curTabItem = this.tabItems.find(el=>el.show == true).tagFlag;

                this.showQuitBtn = false;
            }else{//app内正常访问
                //tab全部显示
                this.tabItems.forEach(el=>{
                    el.show = true;
                })
                this.curTabItem = 'patient';//默认定位到患者列表

                this.showQuitBtn = true;
            }
            this.setSkinTestInterval();//设置皮试定时器
        },
        computed:{
            ...mapState(["skinTestPatientList"]),
        },
        beforeDestroy(){
            clearInterval(this.skinTestInterval);//销毁皮试定时器
        },
        methods: {
            //设置皮试轮询定时器
            setSkinTestInterval(){
                if(this.skinTestInterval){//先清空定时器
                    clearInterval(this.skinTestInterval);
                }
                this.skinTestInterval = setInterval(()=>{
                    console.log('皮试计时器轮询...');
                    let nowDate = new Date().valueOf();
                    let skinTestCompletePatientList = [];//已完成皮试需要提醒的患者列表
                    if(this.skinTestPatientList.length > 0){//vuex中存在未录入结果的患者
                        //循环 vuex 中的皮试患者队列
                        this.skinTestPatientList.forEach(el=>{
                            if(nowDate > el.shouldEndTime){//皮试已结束
                                skinTestCompletePatientList.push(el);
                            }
                        })
                        if(skinTestCompletePatientList.length > 0){//存在需要提醒的患者
                            this.skinCompleteTipsContent = skinTestCompletePatientList;
                            this.skinCompleteTipsShow = true;
                            this.handleNotify();//设备震动
                            
                        }
                    }
                },2500);//1秒检查一次是否有人皮试结束
            },
            /**
             * 点击皮试提示框确认按钮
             */
            confirmSkinTestTips(){
                this.skinCompleteTipsShow = false;//关闭弹窗
                try{
                    clearInterval(this.skinTestInterval);//暂时关闭定时器
                }catch(err){
                    showToast(-1,err);
                }
            },
            //震动响铃
            handleNotify(){
                MethodChannel.emit('bsNotify');
            },
            isTabSelect(item) {
                return this.curTabItem == item.tagFlag;
            },
            tabClick(item) {
                this.curTabItem = item.tagFlag;
            }
        },
    }
</script>

<style lang="scss">
    .home-page {
        width: 100vw;
        height: 100vh;
        position: relative;
    }
    .patient-list {
        height: 93%;
    }

    .bottom-area {
        background-color: #fff;
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        display: flex;
        flex-direction: column;

        .scroll-view {
            width: 100%;
            white-space: nowrap;
        }
        .tab-view {
            display: inline-block;
        }
        .tab-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 110rpx;
            padding: 20rpx 20rpx 20rpx 20rpx;

            .tab-title {
                font-size: 25rpx;
                margin-top: 10rpx;
            }
            .tab-title-active {
                color: $bs-color-primary;
            }
            .tab-title-inactive {
                color: $bs-color-major;
            }
        }
    }
</style>
